<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="/public/static/wx/css/base.css" />
    <link rel="stylesheet" type="text/css" href="/public/static/wx/font/font-awesome-4.7.0/css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="/public/static/wx/plug-in/layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="/public/static/wx/css/submit-protocol.css" />
    <script src="/public/static/wx/js/flex.js" type="text/javascript" charset="utf-8"></script>
    <title>提交协议</title>
    <style>
        .fls{
            width: 23.5%;
            height: 71px;
            display: inline-block;
            text-align: center;
            position: relative;
            margin: 0 2px;
        }
        #ls img{
            height: 80%;
            max-width: 100%;
        }
        .fname{
            display: block;
            font-size: 14px;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        #m1,#m2{
            display: none;
            text-align: center;
            line-height: 97px;
            background-color: rgba(0,0,0,0.4);
            font-size: 15px;
            color: #fff;
            width: 100%;
        }
        .opt_file{
            width: 100px !important;
            height: 75px !important;
            border-radius: 5px !important;
            overflow: hidden;
        }
        .remove-f{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 80%;
            background-color: rgba(0,0,0,0.2);
            color: #f8f8f8;
            line-height: 65px;
            font-size: 18px;
        }
    </style>
</head>
<body>
<div class="index">
    <div class="topbar">
        <a href="javascript:history.go(-1);"><i class="fa fa-angle-left"></i></a>
        <p>协议单上传</p>
    </div>
    <ul class="list">
        <li class="clearfix">
            <p class="title">标题</p>
            <p class="content">{:input('title')}</p>
        </li>
        <li class="clearfix">
            <p class="title">故障类型</p>
            <p class="content">{:input('fault_name')}</p>
        </li>
        <li class="clearfix">
            <p class="title">接单时间</p>
            <p class="content">{:input('time')}</p>
        </li>
        <!--<li class="clearfix">
            <p class="title">完成时间</p>
            <p class="content">2018-07-04 10:35:42</p>
        </li>-->
    </ul>
    <div class="input-group clearfix">
        <div class="input-box have">
            <input type="file" multiple id="files"/>
            <span id="m1">继续选择</span>
        </div>
        <div class="input-box shot">
            <input type="file" accept="image/*" id="file" capture="camera"/>
            <span id="m2">继续拍摄</span>
        </div>

        <div id="ls" style="clear: both">
        </div>
    </div>

    <div class="btn" onclick="sub()">
        提交
    </div>
</div>

<script src="/public/static/wx/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/public/static/wx/plug-in/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
<script>

    let did = '{:input("id")}';

    let files = [];
    let files_base = [];

    $('#files').change(function () {
        //files = [];
        let fs = $('#files')[0].files;
        if(fs.length>0){
            for (let i=0;i<fs.length;i++){
                files.push(fs[i]);
            }
        }
        $('#m1').css('display','block');
        ls();
        files_base_fn();
    });

    let file = null;

    $('#file').change(function () {
        file = $('#file')[0].files[0];
        files.push(file);
        ls();
        files_base_fn();
        $('#m2').css('display','block');
    });

    //上传文件
    function sub() {

        if(files.length<=0){
            layer.msg('你没有选择文件或拍摄照片',{icon:5});
            return;
        }

        let form = new FormData();

        form.append('dis_id',did);

        for (let u=0;u<files_base.length;u++){
            form.append('files[]',files_base[u]);
        }

        let http = new XMLHttpRequest();

        http.open('post','{:url("comp")}');

        var index_load = layer.load(0, {shade: 0.2,offset:['45%','45%']});

        http.onreadystatechange = function(){
            if (http.readyState === 4) {
                layer.close(index_load);
                let res = http.responseText;
                res = JSON.parse(res);
                if (http.status === 200) {
                    if(res.code == 1){
                        layer.msg(res.msg,{icon:6,shade:0.1},function () {
                            self.location=document.referrer;
                        });
                    }else{
                        layer.msg(res.msg,{icon:5});
                    }
                } else {
                    layer.msg('上传失败',{icon:5});
                }
            }
        };

        http.send(form);

    }

    function ls() {
        $('#ls').empty();
        if(files.length>0){
            for (let i=0;i<files.length;i++){
                $('#ls').append('<span class="fls">\n' +
                    '                <img src="'+pos(files[i],'t'+i)+'" class="t'+i+'" alt="">\n' +
                    '                <span class="fname">'+files[i].name+'</span>\n' +
                    '<span class="remove-f" onclick="mov_f('+i+')">移除</span>'+
                    '            </span>');
            }
        }

        /*if(file)
            $('#ls').append('<span class="fls">\n' +
                '                <img src="'+pos(file,'one')+'" class="one" alt="">\n' +
                '                <span class="fname">'+file.name+'</span>\n' +
                '            </span>');*/

    }
    function mov_f(pos) {
        files.splice(pos,1);
        ls();
        files_base_fn();
    }

    function pos(name,cl) {
        if(name.type.substr(0,name.type.indexOf('/')) == 'image'){
            return base(name,cl);
        }else{
            return '/public/static/common/images/'+type(name.name.substr(name.name.indexOf('.')+1))+'.png';
        }
    }


    function type(name) {
        let ext = ['pdf','ppt','rar','txt','xls','zip'];
        for (let n=0;n<ext.length;n++){
            if(name == ext[n])
                return ext[n];
        }
        return 'file';
    }

    function base(fls,cl){
        if (!/image\/\w+/.test(fls.type))
        {
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(fls);
        reader.onload = function (e) {

            $('.'+cl).attr('src',this.result);
        }
    }


    function photoCompress(file,w,objDiv,is){
        var ready=new FileReader();
        ready.readAsDataURL(file);
        ready.onload=function(){
            var re=this.result;
            canvasDataURL(re,w,objDiv);
        };
    }

    function canvasDataURL(path, obj, callback){
        var img = new Image();
        img.src = path;
        img.onload = function(){
            var that = this;
            // 默认按比例压缩
            var w = that.width,
                h = that.height,
                scale = w / h;
            w = obj.width || w;
            h = obj.height || (w / scale);
            var quality = 0.7;  // 默认图片质量为0.7
            //生成canvas
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            // 创建属性节点
            var anw = document.createAttribute("width");
            anw.nodeValue = w;
            var anh = document.createAttribute("height");
            anh.nodeValue = h;
            canvas.setAttributeNode(anw);
            canvas.setAttributeNode(anh);
            ctx.drawImage(that, 0, 0, w, h);
            // 图像质量
            if(obj.quality && obj.quality <= 1 && obj.quality > 0){
                quality = obj.quality;
            }
            // quality值越小，所绘制出的图像越模糊
            var base64 = canvas.toDataURL('image/jpeg', quality);
            // 回调函数返回base64的值
            callback(base64);
        }
    }
    function files_base_fn() {
        files_base = [];
        for (var i=0;i<files.length;i++){
            if(files[i].size/1024 > 1025*3) {
                photoCompress(files[i], {
                    quality: 0.2
                }, function(base64Codes){
                    files_base.push(base64Codes);
                });
            }else{
                base64img(files[i],function (bases) {
                    files_base.push(bases);
                });
            }
        }
    }


    function base64img(file_sou,fn){
        if (!/image\/\w+/.test(file_sou.type))
        {
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file_sou);
        reader.onload = function (e) {
            fn(this.result);
        }
    }

</script>

</body>
</html>
